﻿<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<html>
		<title>购物车列表</title>
		<style type="text/css">
			.main{
				/*设置外边距，下面有30px距离*/
				margin:0px 0px 30px 0px;
				/*背景色*/
				background-color:#ffffff;
				/*字体大小*/
				font-size:12px;
				/*文字颜色*/
				color:#000000;
				/*文本对齐方式*/
				text-align:center;
				/*垂直对齐方式*/
				vertical-align:top;
				/*设置行高*/
				line-height:150%;
				font-family: Arial, Helvetica, sans-serif;
			}

			/*设置a标签 字体12px 颜色 #0066FF*/
			a {
				font-size: 12px;
				color: #0066FF; /*#1E33F7*/
			}
			/*设置未访问的超连接无下划线*/
			a:link {
				text-decoration: none;
			}
			/*设置访问后的连接颜色为#0066ff 也无下划线*/
			a:visited {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置鼠标移到超连接上无下划线颜色为#990099*/
			a:hover {
				text-decoration: none;
				color: #990099; /*颜色变换*/
			}
			/*设置选定的超连接无下划线，颜色为#0066ff*/
			a:active {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置所有td标签*/
			td{
				text-align:center;
				vertical-align:top;
				font-size:12px;
			}

			/*设置所有的hr标签*/
			hr{
				/*颜色*/
				color:#cccccc;
				/*高度*/
				height:1px;
				/*上外边距5px*/
				margin-top:5px;
				/*下外边距5px*/
				margin-bottom:5px;
				/*分隔线如果超出框架部分隐藏*/
				overflow:hidden;
			}
			/*设置h1*/
			h1{
				font-size:14px;
				color:#000000;
				margin-bottom:5px;
				font-weight:bold;
				display:inline;
				text-align:left;
			}

			#head{
				/*设置head这个div宽度为100%*/
				width:100%;
			}
			.headtab{
				width:100%;
			}
			.headta td{
				/*设置td内边距上10px 右50px 下25px 左135px*!*/
				padding:10px 50px 25px 135px;
			}
			.inputtxt{
				width:130px;
				height:18px;
				border:1px solid #999999;
			}
			/*注册页面content部分整体设计*/
			#content{
				width:900px;
				height: 600px;
				background-color:#fcfdef;
				border:1px solid #eeeddb;
				margin-right:auto;
				margin-left:auto;
			}
			#content td{
				/*设置td内边距上10px 右50px 下25px 左135px*!*/
				padding:10px 0px 0px 0px;
			}
			/*设置边框*/
			.upline{
				border-bottom-width:1px;
				border-bottom-style:dashed;
				border-bottom-color:#b0bec7;
				padding-top:5px;
				padding-bottom:5px;
				margin:20px;
			}
			/*设置文本框样式*/
			.txtinput{
				margin-left:10px;
				font-size:12px;
				width:150px;
				height:18px;
				border:1px solid #a4b4bd;
			}
			/*设置文本域样式*/
			.txtarea{
				margin-left:10px;
				font-size:12px;
				width:350px;
				height:75px;
				border:1px solid #a4b4bd;
			}
			#foot{
				width:100%;
				background-color:#efeedc;
				margin-top:15px;
			}
		</style>
	</head>
	<body class="main">
		<!--
			head是由一行两列table完成展示
		-->
		<div id="head">
		<table class="headtab">
			<tr>
				<td align="left">
					<img src="/images/logo.png">
				</td>
				<td style="text-align:right">
					<img src="/images/cart.gif">
					<a href="/goodscard/queryGoods.do">购物车</a>|
					<a>帮助中心</a>|
					<a>我的帐户</a>|
					<a href="/view/register.html">新用户注册</a>|
				</td>
			</tr>
		</table>
		</div>

<div id="content">
			<table width="100%" border="1" cellspacing="2" class="upline">
				<tr>
					<th><input type="checkbox" name="all">全选</th>
					<th>商品</th>
					<th>单价</th>
					<th>购买数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${goodsCardLists}" var="good">
				<tr style="height: 40px">
					<td ><input type="checkbox" name="sk"></td>
					<td><input type="image" src="${good.bookImg}" width="30px" height="30px">
						<font face="Arial, sans-serif" size="5" color="black">
								${good.bookName}
						</font>
					</td>
					<td>${good.price}</td>
					<td><input type="button" value="+" name="add"/>
						<input type="text" name="num" value="1" style="width: 40px" />
						<input type="button" value="-" name="sub"/>
					</td>
					<td><span class="count">${good.price}</span></td>
					<td><a href="#">删除</a></td>
				</tr>
				</c:forEach>
				<tr style="height: 40px">
					<td></td>
					<td></td>
					<td></td>
					<td>合计</td>
					<td>1000</td>
					<td></td>
				</tr>
			</table>
	</div>
</div>
		<!--
			foot是由两行两列的table完成。
			但是第一个td合并了2行
		-->
		<div id="foot">
			<table bgcolor="#efeedc" width="100%" align="center">
				<tr>
					<td rowspan="2" style="width:10%">
						<img src="/images/logo.png" width="195" height="50" style="margin-left:175px;">
					</td>
					<td style="padding-left:50px;padding-top:5px;">
						<a><font color="#747556">CONTACT US</font></a>
					</td>
				</tr>
				<tr>

					<td style="padding-left:50px;">
						<font color="#747556">copyright&nbsp;2024&copy;重庆应用职业技术学院</font>
					</td>
				</tr>
			</table>
		</div>
	</body>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script>
	$(function(){
		$('input[name=add]').click(function(){
			let value=$(this).next().val();
			let newValue=parseInt(value)+1;
			$(this).next().val(newValue>200?200:newValue);
			if(newValue>200){
				//$(this).prop("disabled", true);
				newValue==200;
				alert('最大数量只能是200');
				return;
			}
			let price=$(this).parent().prev().html();
			compute(price,newValue,$(this));
			computeCount();
		})
		$('input[name=sub]').click(function(){
			let value=$(this).prev().val();
			let newValue=parseInt(value)-1;
			$(this).prev().val(newValue<0?0:newValue);
			if(newValue<0){
				//$(this).prop("disabled", true);
				newValue==0;
				alert('最小数量只能是0');
				return;
			}
			let price=$(this).parent().prev().html();
			compute(price,newValue,$(this));
			computeCount();
		})
		$('input[name=num]').keyup(function(){
			let value=$(this).val();
			if(value>200){
				$(this).val(200);
				alert('最大数量只能是200');
				return;
			}else if(value<0){
				$(this).val(0);
				alert('最小数量只能是0');
				return;
			}
		})
		$('input[name=all]').click(function(){
			if($(this).is(':checked')){
				$('input[name=sk]').prop("checked",true);
			}else{
				$('input[name=sk]').prop("checked",false);
			}
		})
	})

	function compute(price,num,event){
		let sum=parseFloat(price)*parseInt(num);
		event.parent().next().html(sum);
	}
	function computeCount(){
		$(".upline tr").each(function(index,obj){
            if (index < $(".upline tr").length - 1) {
                var thirdCell = $(this).find('td:eq(4)');
                console.log(thirdCell.text()); // 输
            }
		})

	}
</script>
</html>